﻿<script setup lang="ts" name="PersonalCenter">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { useUserInfoStoreWithOut } from '@/store/storage/userInfoStore'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const userInfoStore = useUserInfoStoreWithOut()
const { userInfo } = storeToRefs(userInfoStore)

// 滚动行为
useScrollPosition(route)

const activeTabName = ref('basicInfo')

const formData = ref({
  name: userInfo.value.userName,
  phone: userInfo.value.phone,
  email: userInfo.value.email,
  description: '山不在高，有仙则名；水不在深，有鱼则灵。',
  birthday: '1982-09-21',
  gender: 1,
  genderFont: '男',
  tagsList: ['腹黑', '闷骚', '大神', '技术担当']
})

const handleOk = () => {
  console.log('保存')
}

const genderChangeHandler = (v) => {
  console.log(v)
  genderList.value.forEach((item) => {
    if (item.value === v) {
      formData.value.genderFont = item.label
    }
  })
}

const genderList = ref([])
const getGenderList = async () => {
  genderList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'gender'
  })
}
getGenderList()

const tagInputValue = ref('')
const tagInputVisible = ref(false)
const tagInputRef = ref(null)

const handleClose = (tag: string) => {
  formData.value.tagsList.splice(formData.value.tagsList.indexOf(tag), 1)
}

const showInput = () => {
  tagInputVisible.value = true
  nextTick(() => {
    tagInputRef.value.focus()
  })
}

const handleInputConfirm = () => {
  if (tagInputValue.value) {
    formData.value.tagsList.push(tagInputValue.value)
  }
  tagInputVisible.value = false
  tagInputValue.value = ''
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-row :gutter="systemConfig.space">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div class="personal-center-user-info">
            <el-avatar :size="100" :src="userInfo.avatar" />
            <div class="full-name">{{ formData.name }}</div>
            <div class="description">{{ formData.description }}</div>
            <ul>
              <li>
                <svg-icon icon="ri:community-line"></svg-icon>
                {{ userInfo.department }}
              </li>
              <li>
                <svg-icon icon="ri:phone-line"></svg-icon>
                {{ userInfo.phone }}
              </li>
              <li>
                <svg-icon icon="ri:mail-line"></svg-icon>
                {{ userInfo.email }}
              </li>
              <li>
                <svg-icon icon="ri:cake-2-line"></svg-icon>
                {{ formData.birthday }}
              </li>
              <li>
                <svg-icon v-if="formData.gender === 1" icon="bi:gender-male"></svg-icon>
                <svg-icon v-else-if="formData.gender === 2" icon="bi:gender-female"></svg-icon>
                <svg-icon v-else icon="bi:gender-ambiguous"></svg-icon>
                {{ $t('page.' + formData.genderFont) }}
              </li>
              <li>
                <div class="tag-list">
                  <el-divider />
                  <h5>{{ $t('page.个人标签') }}</h5>
                  <div class="tag-content">
                    <el-tag v-for="tag in formData.tagsList" :key="tag" class="mx-1">
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="16" :xl="16">
        <el-card shadow="hover">
          <el-tabs v-model="activeTabName" class="user-info-tabs">
            <el-tab-pane :label="$t('page.基本信息')" name="basicInfo">
              <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
                <el-form label-width="auto" label-position="right">
                  <el-form-item :label="$t('page.姓名')">
                    <el-input v-model="formData.name" :placeholder="$t('placeholders.请输入') + $t('page.姓名')" />
                  </el-form-item>
                  <el-form-item :label="$t('page.电话')">
                    <el-input v-model="formData.phone" :placeholder="$t('placeholders.请输入') + $t('page.电话')" />
                  </el-form-item>
                  <el-form-item :label="$t('page.邮箱')">
                    <el-input v-model="formData.email" :placeholder="$t('placeholders.请输入') + $t('page.邮箱')" />
                  </el-form-item>
                  <el-form-item :label="$t('page.生日')">
                    <el-date-picker v-model="formData.birthday" type="date" :placeholder="$t('placeholders.请选择') + $t('page.日期')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                  </el-form-item>
                  <el-form-item :label="$t('page.性别')">
                    <el-radio-group class="radio-button" v-model="formData.gender" @change="genderChangeHandler">
                      <el-radio-button v-for="(item, index) in genderList" :key="index" :label="item.value" border>
                        {{ $t('page.' + item.label) }}
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item :label="$t('page.个人简介')">
                    <el-input type="textarea" v-model="formData.description" :placeholder="$t('placeholders.请输入') + $t('page.个人简介')" />
                  </el-form-item>
                  <el-form-item :label="$t('page.标签')">
                    <el-tag v-for="tag in formData.tagsList" :key="tag" class="mx-1" closable :disable-transitions="false" @close="handleClose(tag)">
                      {{ tag }}
                    </el-tag>
                    <el-input v-if="tagInputVisible" ref="tagInputRef" v-model="tagInputValue" class="ml-1 w-20" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                    <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                      +
                      {{
                      $t('buttons.buttonAdd') }}
                    </el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="btn-save" type="primary" @click="handleOk">
                      {{ $t('buttons.buttonSave')
                      }}
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-card {
  display: flex;
  flex: 1;

  :deep(.el-card__body) {
    flex: 1;
  }
}

[class*=el-col-].is-guttered {
  display: flex;
}

.personal-center-user-info {
  padding: var(--el-space);

  .el-avatar {
    display: flex;
    margin: 0 auto;
  }

  .full-name {
    margin-top: 15px;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
  }

  .description {
    margin-top: 8px;
    text-align: center;
  }

  ul {
    margin-top: 18px;
    padding: 0 var(--el-space);
    overflow: hidden;

    li {
      display: flex;
      align-items: center;
      line-height: 32px;

      .el-icon {
        margin-right: 5px;
      }

      .tag-list {
        width: 100%;
        margin-top: 15px;

        .el-divider {
          margin-top: 0;
          margin-bottom: 15px;
        }

        h5 {
          font-weight: 700;
          line-height: 1.2;
        }

        .tag-content {
          margin: 10px -4px 0;

          .el-tag {
            margin: 4px;
          }
        }
      }
    }
  }
}

.el-form {
  width: 100%;

  .btn-save {
    margin-left: 12px;
  }
}
</style>
